<section class="section">
  <h2>Tables</h2>
  <table>
    <caption>
      Demo Table
    </caption>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 Value 1</td>
        <td>Row 1 Value 2</td>
        <td>Row 1 Value 3</td>
        <td>Row 1 Value 4</td>
      </tr>
      <tr>
        <td>Row 2 Value 1</td>
        <td>Row 2 Value 2</td>
        <td>Row 2 Value 3</td>
        <td>Row 2 Value 4</td>
      </tr>
      <tr>
        <td>Row 3 Value 1</td>
        <td>Row 3 Value 2</td>
        <td>Row 3 Value 3</td>
        <td>Row 3 Value 4</td>
      </tr>
      <tr>
        <td>Row 4 Value 1</td>
        <td>Row 4 Value 2</td>
        <td>Row 4 Value 3</td>
        <td>Row 4 Value 4</td>
      </tr>
      <tr>
        <td>Row 5 Value 1</td>
        <td>Row 5 Value 2</td>
        <td>Row 5 Value 3</td>
        <td>Row 5 Value 4</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Total 1</th>
        <th>Total 2</th>
        <th>Total 3</th>
        <th>Total 4</th>
      </tr>
    </tfoot>
  </table>
  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;table&gt;
  &lt;caption&gt;
    Demo Table
  &lt;/caption&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Column 1&lt;/th&gt;
      &lt;th&gt;Column 2&lt;/th&gt;
      &lt;th&gt;Column 3&lt;/th&gt;
      &lt;th&gt;Column 4&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Row 1 Value 1&lt;/td&gt;
      &lt;td&gt;Row 1 Value 2&lt;/td&gt;
      &lt;td&gt;Row 1 Value 3&lt;/td&gt;
      &lt;td&gt;Row 1 Value 4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Row 2 Value 1&lt;/td&gt;
      &lt;td&gt;Row 2 Value 2&lt;/td&gt;
      &lt;td&gt;Row 2 Value 3&lt;/td&gt;
      &lt;td&gt;Row 2 Value 4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Row 3 Value 1&lt;/td&gt;
      &lt;td&gt;Row 3 Value 2&lt;/td&gt;
      &lt;td&gt;Row 3 Value 3&lt;/td&gt;
      &lt;td&gt;Row 3 Value 4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Row 4 Value 1&lt;/td&gt;
      &lt;td&gt;Row 4 Value 2&lt;/td&gt;
      &lt;td&gt;Row 4 Value 3&lt;/td&gt;
      &lt;td&gt;Row 4 Value 4&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Row 5 Value 1&lt;/td&gt;
      &lt;td&gt;Row 5 Value 2&lt;/td&gt;
      &lt;td&gt;Row 5 Value 3&lt;/td&gt;
      &lt;td&gt;Row 5 Value 4&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;th&gt;Total 1&lt;/th&gt;
      &lt;th&gt;Total 2&lt;/th&gt;
      &lt;th&gt;Total 3&lt;/th&gt;
      &lt;th&gt;Total 4&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
&lt;/table&gt;</code></pre>
  </details>
</section>